<template>
  <div class="list">
    <div  class="card" :style="`width: calc(100% / ${columns} - 30px);`" v-for="item in songs">
      <div :style="`display: grid;flex: 0 0 65px; place-items: center;width: 65px;height: 65px;border-radius: 10px; background: url(${item.albumPic}) center / cover;`">
        <el-icon @click="toTabs(item)">
          <i-bi-pause-fill v-if="playSongId===item.id"/>
          <i-bi-play-fill v-else/>
        </el-icon>
      </div>
      <div class="info">
        <div>{{item.name}}</div>
        <div>
          <span class="vipspan" v-if="item.fee===1">vip</span>
          <span class="vipspan" v-if="item.fee===4">无版权</span>
          <span class="vipspan" v-if="item.subTitle">{{item.subTitle}}</span>
          <span class="singers" v-for="(singer, index) in item.singer" :key="singer.id" @click.stop="toTabs(singer.id)">
            {{ singer.name }}<span v-if="index < item.singer.length - 1"> / </span>
          </span>
        </div>
      </div>
      <div class="icons">
        <el-icon @click="toTabs"><i-bi-cloud-download /></el-icon>
        <el-icon @click="toTabs"><i-bi-heart /></el-icon>
        <el-icon @click="toTabs"><i-bi-list /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="SongCard">
import {usePlayStore} from '@/store/PlayStore'
import emitter from '@/store/emitter'
import { computed } from "vue";

defineProps(['songs','columns']);
const playstore = usePlayStore()
function toTabs(song){
  if (playstore.isPlayed){
    emitter.emit('playAudioType', 'play')
  }else{
    playstore.selectPlay([song])
  }
}
const playSongId = computed(()=>{
  if (playstore.isPlayed){
    return playstore.playList[playstore.playIndex].id
  }
  return 0
})
</script>
<style scoped lang="scss">
.list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .card{
    display: flex;
    width: calc(50vw - 200px);
    gap: 20px;
    border-radius: 10px;
    padding: 8px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    color: var(--transparent-5);
    &:hover {
      background-color: var(--my-bg-menu-hover);
      cursor: pointer;
      .el-icon {
        display: inline-block;
        &:hover{
          color: var(--el-text-color-primary);
        }
      }
      .info{
        flex: 3;
        overflow: hidden;
      }
      .icons{
        flex: 2;
        overflow: hidden;
      }
    }
    img {
      width: 65px;
      border-radius: 10px;
    }
    .info{
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-around;
      overflow: hidden;
      max-width: 100%;
      > div{
        white-space: nowrap;
        overflow: hidden;
      }
      .singers {
        font-size: 12px;
        color: var(--transparent-3);
      }
      .vipspan{
        font-size: 10px;
        color: var(--el-color-error);
        padding: 0 4px 2px 4px;
        border-radius: 5px;
        margin-right: 10px;
        border: inset 1px var(--el-color-error);
      }

    }
    .icons {
      color: var(--el-text-color-placeholder);
      display: flex;
      .el-icon{
        margin-right: 5px;
        font-size: 17px;
      }
    }
    .el-icon{
      display: none;
      font-size: 30px;
    }
  }
}
</style>
